import React, { Component } from 'react';

class App extends Component {
  // 存放组件内部数据
  state = {
    mes: 'hello JSX !!!',
    title: 'hello React !!!',
    list: [
      '项目一',
      '项目二',
      '项目三',
      '项目四',
    ],
    isShow: false,
    count: 1
  }
  handleClick() {
    const { count } = this.state
    // this.setState修改组件state唯一的方法
    // 第一个参数可以是对象或者函数  会将对象或者函数的结果和原有state合并
    // 第二个参数是回调函数  当数据更新并且组件也更新完毕之后， 该函数会执行

    // 对象写法
    this.setState({
      count: count + 1,
    }, () => {
      console.log(this.state.count);
    })

   
    // 函数写法 函数接受两个参数  分别为 state 和 props 
    // this.setState((state) => {
    //   return {
    //     count: state.count + 1
    //   }
    // })
  }
  // 1. JSX 语法   它被称为 JSX，是一个 JavaScript 的语法扩展
  render() {
    const { mes, title, list, isShow, count } = this.state
    return (
      <div>
        <h1>{ count }</h1>
        <button onClick={ () => this.handleClick() }>+1</button>
        {/* 使用单花括号语法  表达式 */}
        {/* 变量 */}
        <h1>{ mes }</h1>
        <h2>{ title }</h2>
        {/* 条件判断 */}
        { isShow && <h3>啊哈哈</h3> }
        <ul>
          {/* 列表循环 */}
          {
            list.map((v, i) => {
              return <li key={i}>{ v }</li>
            })
          }
        </ul>
      </div>
    );
  }
}

export default App;
